<template>
    <!-- 页面容器 -->
    <div class = "container">
        <!-- 标题 -->
        <div class="list-title">
           <span class="left">{{msg}}</span>
           <span class="right">(每日更新)</span>
        
        </div>

        <!-- 推荐列表 -->
        <div class="list-table">
            <table  v-infinite-scroll="load">
                <tr :class="index%2==1 ? 'even-row' : ''" v-for="(radio,index) in radios" :key="radio.id">
                    
                    <td>{{index+1}}</td>
                    <td>
                        <img :src="radio.coverImgUrl" alt="">
                        <span class="bookName" >{{radio.name}}</span>
                    </td>
                    <td>{{}}</td>
                    <td>播放{{}}</td>
                    <td>赞{{}}</td>
                    <td>
                        <span class="bookSort">{{radio.tags[0]}} {{radio.tags[1]}} {{radio.tags[2]}}</span>
                    </td>
                </tr>
            </table>
        </div>

        
    </div>
    

</template>

<script setup>
import { useRouter } from 'vue-router';
import axios from 'axios'
import { onMounted, ref } from 'vue';


const $router = useRouter()

// 测试
const msg = ref('每日推荐')

// 存储电台数据
const radios = ref([])

// 初始渲染
onMounted(() => {
    axios.get('http://122.112.161.135:3000/top/playlist?limit=20&offset=0').then(res => {
        // console.log(res);
        radios.value = res.data.playlists
        // console.log(radios.value[0].name);
        // console.log(radios.value[0].coverUrl);
    })
})

let limit = ref(20)
// 实现滚动加载
function load() {
    limit.value += 20
    axios.get(`http://122.112.161.135:3000/top/playlist?limit=${limit.value}&offset=0`).then(res => {
        // console.log(res);
        radios.value = res.data.playlists
        // console.log(radios.value[0].name);
        console.log(radios.value.length);
    })
}


</script>






<style scoped>
    /* 表格的初始化 */
    table,
      tr,
      th,
      td {
        /* 给表格添加边框 */
        border: 1px solid #ddd;
        /* 将表格的边框合并为一个单一的边框 */
        border-collapse: collapse;
        /* 设置相x邻单元格的边框间的距离（仅用于"边框分离"模式） */
        border-spacing: 0;
      }

    /* 页面容器 */
    .container {
        display:flex;
        flex-direction: column;
        width: 80vw;
        min-width: 1000px;
        /* height: 90vh; */
        /* background-color: pink; */
        margin: 20px auto;
        padding: 25px;
        /* border: 2px solid #666; */
        box-shadow: 3px 3px 5px #999;
    }

    /* 标题 */
    .container .list-title {
        height: 50px;
        width: 100%;
        /* background-color: pink; */
        border-bottom: 3px solid #c20c0c;
        line-height: 53px;
    }

   
    /* 标题的左半部分 */
    .container .list-title .left {
        font-size: 22px;
    }

    /* 标题的右半部分 */
    .container .list-title .right {
        margin-left: 5px;
        font-size: 12px;
        color: #b9b9ba;
    }





    /* 推荐列表 */
    .container .list-table {
        flex:1;
        width: 100%;
        /* background-color: blue; */
    }

    /* 推荐列表--表格 */
    .container .list-table table {
        width: 100%;
        /* 给表格设置最小宽度，使 */
        /* min-width: 1000px; */

    }

    /* 推荐列表--表格行 */
    .container .list-table tr {
        height: 100px;
    }

    /* 推荐列表--表格行--偶数行样式 */
    .even-row {
        background-color: #eee;
    }

    /* 推荐列表--表格行--hover样式 */
    .container .list-table tr:hover{
        background-color: #bfbfbf;
    }


    /* 推荐列表--表格单元格 */
    .container .list-table td {
        padding:5px 25px;
        font-size:12px;
        color: #747171;
        font-weight: 600;
    }

    /* 推荐列表--封面图 */
    .container .list-table img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        vertical-align: middle;
    }

    /* 推荐列表--电台名名 */
    .container .list-table .bookName {
        color: #333;
        cursor: pointer;
    }

    /* 推荐列表--分类 */
    .container .list-table .bookSort {
        border: 1px solid #333;
        padding: 0 3px;
    }

</style>